<template>
  <div class="neon-background">
    <canvas ref="canvasRef"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'

const props = defineProps({
  config: {
    type: Object,
    default: () => ({
      style: 'lines',
      colors: ['#ff006e', '#fb5607', '#ffbe0b', '#8338ec']
    })
  }
})

const canvasRef = ref(null)
let ctx = null
let animationId = null
let time = 0

const drawLines = () => {
  if (!ctx || !canvasRef.value) return

  const { width, height } = canvasRef.value
  const colors = props.config.colors

  for (let i = 0; i < 30; i++) {
    const x1 = (Math.sin(time + i * 0.5) * 0.5 + 0.5) * width
    const y1 = (i / 30) * height
    const x2 = (Math.sin(time + i * 0.5 + 1) * 0.5 + 0.5) * width
    const y2 = ((i + 1) / 30) * height

    const gradient = ctx.createLinearGradient(x1, y1, x2, y2)
    const color = colors[i % colors.length]
    gradient.addColorStop(0, color + 'ff')
    gradient.addColorStop(0.5, color + '88')
    gradient.addColorStop(1, color + 'ff')

    // 外发光
    ctx.shadowBlur = 20
    ctx.shadowColor = color
    ctx.strokeStyle = gradient
    ctx.lineWidth = 3
    ctx.beginPath()
    ctx.moveTo(x1, y1)
    ctx.lineTo(x2, y2)
    ctx.stroke()
  }
}

const drawGrid = () => {
  if (!ctx || !canvasRef.value) return

  const { width, height } = canvasRef.value
  const colors = props.config.colors
  const gridSize = 50

  // 垂直线
  for (let x = 0; x < width; x += gridSize) {
    const offset = Math.sin(time + x * 0.01) * 10
    const colorIndex = Math.floor((x / gridSize) % colors.length)
    const color = colors[colorIndex]

    ctx.shadowBlur = 15
    ctx.shadowColor = color
    ctx.strokeStyle = color
    ctx.lineWidth = 2
    ctx.globalAlpha = 0.6 + Math.sin(time + x * 0.01) * 0.4

    ctx.beginPath()
    ctx.moveTo(x + offset, 0)
    ctx.lineTo(x + offset, height)
    ctx.stroke()
  }

  // 水平线
  for (let y = 0; y < height; y += gridSize) {
    const offset = Math.cos(time + y * 0.01) * 10
    const colorIndex = Math.floor((y / gridSize) % colors.length)
    const color = colors[colorIndex]

    ctx.shadowBlur = 15
    ctx.shadowColor = color
    ctx.strokeStyle = color
    ctx.lineWidth = 2
    ctx.globalAlpha = 0.6 + Math.cos(time + y * 0.01) * 0.4

    ctx.beginPath()
    ctx.moveTo(0, y + offset)
    ctx.lineTo(width, y + offset)
    ctx.stroke()
  }

  ctx.globalAlpha = 1
}

const animate = () => {
  if (!ctx || !canvasRef.value) return

  ctx.fillStyle = '#000000'
  ctx.fillRect(0, 0, canvasRef.value.width, canvasRef.value.height)

  time += 0.02

  if (props.config.style === 'lines') {
    drawLines()
  } else if (props.config.style === 'grid') {
    drawGrid()
  }

  animationId = requestAnimationFrame(animate)
}

const init = () => {
  const canvas = canvasRef.value
  if (!canvas) return

  canvas.width = canvas.offsetWidth
  canvas.height = canvas.offsetHeight
  ctx = canvas.getContext('2d')

  time = 0
}

const handleResize = () => {
  init()
}

onMounted(() => {
  init()
  animate()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
  window.removeEventListener('resize', handleResize)
})

watch(() => props.config, () => {
  init()
}, { deep: true })
</script>

<style scoped>
.neon-background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000000;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
</style>

